<template>
    <div class="big-digits">
        <BigDigit v-for="(char,idx) in chars" :value="char" :key="idx"/>
    </div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue'
import BigDigit from './BigDigit.vue'
export default defineComponent({
    components: { BigDigit },
    props: {
        value: {
            type: String,
            default: ''
        },
    },
    setup(props) {
        const chars = computed(() => {
            const cs = []
            for (const char of props.value || '') {
                cs.push(char)
            }
            return cs
        })
        return {
            chars
        }
    }
})

</script>

<style scoped>
.big-digits {
    display: inline-flex;
}

.big-digit + .big-digit {
    margin-left: 12px;
}
</style>